<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import markdownit from 'markdown-it';
import { useI18n } from 'vue-i18n';

const listing = ref<Record<string, any>[]>([]);
const loading = ref(false);
const pageNumber = ref(1);
const form = ref({
  name: '',
});
const pagination = ref({
  pageSize: 20,
  total: 0,
  current: 1,
});
const selectedKeys = ref<string[]>([]);
const { warning } = useNotification();
const { t } = useI18n();

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/email/temp/getEmailTempList', {
    method: 'post',
    data: {
      emailTemplateName: form.value.name,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pagination.value.current = page;
    pagination.value.total = data.total;
  }
}

onMounted(() => {
  refresh();
});

const getDetail = async (id: string) => {
  const { isSuccess, data } = await $fetch('/admin/email/temp/getEmailById', {
    data: {
      emailId: id,
    },
  });

  if (isSuccess) {
    return data;
  }
  else {
    return {};
  }
}

const dialogClickButton = async (button: string) => {
  if (button !== 'ok') {
    return true;
  }

  if (button === 'ok' && selectedKeys.value.length === 0) {
    warning(t('settings.view.subscription.user.template.notice1'));
    return false;
  }

  const detail = await getDetail(selectedKeys.value[0]);
  const md = markdownit();

  return {
    close: true,
    subject: detail.emailTemplateTitle,
    content: md.render(detail.emailTemplateContent ?? ''),
  };
}

const handleSubmit = () => {
  refresh();
}

const pageChange = (page: number) => {
  pageNumber.value = page;

  refresh(pageNumber.value);
}

defineExpose({
  dialogClickButton,
  dialogOptions: {
    width: 1200,
    title: t('settings.view.subscription.user.template.title'),
    buttons: { ok: t('settings.view.subscription.user.template.status1'), cancel: t('settings.view.subscription.user.template.status2') },
  },
});
</script>

<template>
  <div>
    <AForm layout="inline" :model="{}" @submit="handleSubmit">
      <AFormItem :label="$t('settings.view.subscription.user.template.column1')">
        <AInput v-model="form.name" allow-clear />
      </AFormItem>
      <AFormItem hide-label>
        <ASpace>
          <AButton type="primary" html-type="submit">{{ $t('settings.action.search') }}</AButton>
        </ASpace>
      </AFormItem>
    </AForm>

    <ATable
      :data="listing"
      :pagination="pagination"
      :row-selection="{
        type: 'radio',
        showCheckedAll: false,
        onlyCurrent: true,
      }"
      v-model:selected-keys="selectedKeys"
      row-key="id"
      @page-change="pageChange"
    >
      <template #columns>
        <ATableColumn :title="$t('settings.view.subscription.user.template.column1')" data-index="emailTemplateName" />
        <ATableColumn :title="$t('settings.view.subscription.user.template.column2')" data-index="emailTemplateTitle" />
      </template>
    </ATable>
  </div>
</template>

<style lang="scss" scoped>
</style>
